<html>
<head>
		<title>Location based story telling</title> 
		<meta name="viewport" content="width=device-width, user-scalable=0, initial-scale=1">
<style>
    #main {
    background:red;
    width:100%;
    height:80%;
	text-align: justify;
}
</style>


		<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" /> -->
		
		<!-- Nach JQuery Scrollview Tutorial -->
		<script src="http://jquerymobile.com/test/js/jquery.js"></script>
		<script src="http://jquerymobile.com/test/js/"></script>
	

        <script type="text/javascript" src="src/location.js"></script> 
		<script type="text/javascript" src="src/weather.js"></script>
		<script type="text/javascript" src="src/poi.js"></script>
		<script type="text/javascript" src="src/geocoder.js"></script>
		<script type="text/javascript" src="src/story.js"></script>
		<!--<script type="text/javascript" src="src/iscroll.js"></script>-->
		<script type="text/javascript" src="src/callbacks.js"></script>
		<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
		<script type="text/javascript" src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA0vCoWcxvGkr4fU1AqFCRJhTQNpGzbTudXx4TbzyvdAO1PNxuYBRRkuHk1PbNzKNidjQShvYpw5YvDg"></script>

<script type = "text/javaScript">
	var pages = new Array();
	var page = 0;

var text = "hallo, ich schreibe hier jetzt mal eben einen text um besser zu verstehen wann denn genau der umbruch stattfindet und was alles so zurückgeworfen wird. Hoffentlich erhalte ich jetzt kenien Text aus der Mitte heraus. <h1>Das Rätsel von Boscombe Valley</h1><br> Das sollte nun auch als neuer Testtext ausreichen hallo, ich schreibe hier jetzt mal eben einen text um besser zu verstehen wann denn genau der umbruch stattfindet und was alles so zurückgeworfen wird. Hoffentlich erhalte ich jetzt kenien Text aus der Mitte heraus. Das sollte nun auch als neuer Testtext ausreichen hallo, ich schreibe hier jetzt mal eben einen text um besser zu verstehen wann denn genau der umbruch stattfindet und was alles so zurückgeworfen wird. Hoffentlich erhalte ich jetzt kenien Text aus der Mitte heraus. Das sollte nun auch als neuer Testtext ausreichen hallo, ich schreibe hier jetzt mal eben einen text um besser zu verstehen wann denn genau der umbruch stattfindet und was alles so zurückgeworfen wird. Hoffentlich erhalte ich jetzt kenien Text aus der Mitte heraus. Das sollte nun auch als neuer Testtext ausreichen hallo, ich schreibe hier jetzt mal eben einen text um besser zu verstehen wann denn genau der umbruch stattfindet und was alles so zurückgeworfen wird. Hoffentlich erhalte ich jetzt kenien Text aus der Mitte heraus. Das sollte nun auch als neuer Testtext ausreichen hallo, ich schreibe hier jetzt mal eben einen text um besser zu verstehen wann denn genau der umbruch stattfindet und was alles so zurückgeworfen wird. Hoffentlich erhalte ich jetzt kenien Text aus der Mitte heraus. Das sollte nun auch als neuer Testtext ausreichen";
var story = "";

function go(){

    textCont = document.getElementById( "main" );

	pages.push(splitText());
	textCont.innerHTML = pages[0].innerHTML;
	if(!text == ""){
			pages.push(splitText());
		}
	
}
	function splitText(){
	var div = document.createElement("div");
		div.style.position = "absolute";
		div.style.visibility = "hidden";
		div.style.width = textCont.clientWidth + "px";
		div.innerHTML = text;
		document.body.appendChild(div);
		
		if ( div.clientHeight > textCont.clientHeight ) {
			div.style.width = "auto";
			var textWidth = div.clientWidth,
				offsetPercent = (div.clientWidth - div.clientWidth % textCont.clientWidth ) / div.clientWidth,
				lineHeight = div.clientHeight;
			div.innerHTML = div.innerHTML.substring( 0, parseInt( div.innerHTML.length * offsetPercent ) );
			div.style.width = textCont.clientWidth + "px";
			if ( div.clientHeight >= textCont.clientHeight ) {
				offsetPercent = ( textCont.clientHeight + lineHeight ) / div.clientHeight;
				div.innerHTML = div.innerHTML.substring( 0, parseInt( div.innerHTML.length * offsetPercent ) );

				while ( div.clientHeight > textCont.clientHeight ) {
					 div.innerHTML = div.innerHTML.substring( 0, div.innerHTML.length - 1 );

				}
				
			}
		}
	text= text.substring(div.innerHTML.length);
	return div;

	}
	function nextPage(){
		if(page < pages.length-1){
			page++;
			textCont.innerHTML = pages[page].innerHTML;
		}
		if(!text == ""){
			pages.push(splitText());
			if(!text == ""){
				pages.push(splitText());
			}
		}

	}
	
	function lastPage(){
		if(page > 0 ){
			page--;
			textCont.innerHTML = pages[page].innerHTML;
		}
	}
	


</script>
</head>
<body onload="go()">
<div id="test">
<div id="main">
</div>
</div>
	<input type="button" name="Text 1" value="Zurück"
      onclick="javascript:lastPage()">
    <input type="button" name="Text 1" value="Nächste Seite"
      onclick="javascript:nextPage()">

</body>
</html> 